/**
  其他境外交流项目管理-申请
*/
<template>
  <div class="project-application-container">
    <div style="height: 30px;">
      <el-breadcrumb style="float: left;" separator="/">
        <el-breadcrumb-item :to="{ path: '/exchangeProjectApp' }">
        <span @click="reback()">{{ $t('projectManage.otherOverseasExchange') }}</span></el-breadcrumb-item>
        <el-breadcrumb-item>{{ $t('externamExchangeBase.apply') }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-card shadow="never" v-loading="loading" body-style="padding: 24px;">
      <div slot="header" class="title">
        {{ $t('projectManage.otherOverseasExchange') }} - {{ $t('externamExchangeBase.apply') }}
        <el-button style="float:right; margin-top: -5px;" @click="cancel()">{{ $t('common.btn.back') }}</el-button>
      </div>
      <div class="personal-info-container">
        <!-- 个人信息开始 -->
        <div class="privacy-title title">{{ $t('projectApplication.personalInfo') }}</div>
        <el-form :model="applyInfo" ref="applyInfo" class="apply-info">
          <el-row :gutter="24">
            <el-col :span="6">
              <!-- 年级 -->
              <el-form-item
                :label="$t('projectApplication.grade') + '：'"
                prop="studentGrade">
                <el-input disabled v-model="personalInfo.studentGrade"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <!-- 学院 -->
              <el-form-item
                :label="$t('externamExchangeBase.college') + '：'"
                prop="studentFacultyName">
                <el-input disabled v-model="personalInfo.studentFacultyName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <!-- 姓名 -->
              <el-form-item
                :label="$t('externamExchangeBase.studentName') + '：'"
                prop="studentName">
                <el-input disabled v-model="personalInfo.studentName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <!-- 学号 -->
              <el-form-item
                :label="$t('externamExchangeBase.studentId') + '：'"
                prop="studentId">
                <el-input disabled v-model="personalInfo.studentId"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="6">
              <!-- 专业 -->
              <el-form-item
                :label="$t('externamExchangeBase.profession') + '：'"
                prop="studentProfessionName">
                <el-input disabled v-model="personalInfo.studentProfessionName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <!-- 学习形式 -->
              <el-form-item
                :label="$t('projectApplication.studentFormLearning') + '：'"
                prop="studentFormLearning">
                <el-input disabled v-model="personalInfo.studentFormLearning"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <!-- 在校状态 -->
              <el-form-item
                :label="$t('projectApplication.studentLeaveSchool') + '：'"
                prop="studentLeaveSchool">
                <el-input disabled v-model="personalInfo.studentLeaveSchool"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <!-- 负责导师 -->
              <el-form-item
                :label="$t('projectApplication.studentTeacherName') + '：'"
                prop="studentTeacherName">
                <el-input disabled v-model="personalInfo.studentTeacherName"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="6">
              <!-- 培养层次 -->
              <el-form-item
                :label="$t('projectApplication.studentTrainingLevel') + '：'"
                prop="studentTrainingLevel">
                <el-input disabled v-model="personalInfo.studentTrainingLevel"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <!-- 培养类别 -->
              <el-form-item
                :label="$t('externamExchangeBase.cultivationCategory') + '：'"
                prop="studentTrainingCategory">
                <el-input disabled v-model="personalInfo.studentTrainingCategory"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <!-- 预计毕业时间 -->
              <el-form-item
                :label="$t('projectApplication.studentExpectedGraduationDate') + '：'"
                prop="studentExpectedGraduationDate">
                <el-input disabled v-model="personalInfo.studentExpectedGraduationDate"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <!-- 是否存在不及格课程 -->
              <el-form-item
                :label="$t('projectApplication.studentExistFailed') + '：'"
                prop="studentExistFailed">
                <el-input disabled v-model="personalInfo.studentExistFailed"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="6">
              <!-- 博士论文是否开题 -->
              <el-form-item
                :label="$t('projectApplication.studentThesisOpened') + '：'"
                prop="studentThesisOpened">
                <el-input disabled v-model="personalInfo.studentThesisOpened"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <!-- 录取类别 -->
              <el-form-item
                :label="$t('projectApplication.studentEnrolCategory') + '：'"
                prop="studentEnrolCategory">
                <el-input disabled v-model="personalInfo.studentEnrolCategory"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <!-- 手机号码 -->
              <el-form-item
                :label="$t('projectApplication.studentPhone') + '：'"
                prop="studentPhone"
                :rules="[{ required: true, message: $t('projectApplication.requireStudentPhone'), trigger: 'blur'},{ validator: checkSpecial, trigger: 'blur'},{ validator: checkPhone, trigger: 'blur' }]">
                <el-input :placeholder="$t('common.pla.pleaseInput')" v-model="applyInfo.studentPhone" :maxlength="32" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <!-- 电子邮件地址 -->
              <el-form-item
                :label="$t('projectApplication.studentEmail') + '：'"
                prop="studentEmail"
                :rules="[{ required: true, message: $t('projectApplication.requireStudentEmail'), trigger: 'blur'},{ validator: checkSpecial, trigger: 'blur'},{ validator: checkEmail, trigger: 'blur' }]">
                <el-input :placeholder="$t('common.pla.pleaseInput')" v-model="applyInfo.studentEmail" :maxlength="320" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="6">
              <!-- 是否申请过对外交流项目 -->
              <el-form-item
                :label="$t('projectApplication.studentOnceApproved') + '：'"
                prop="studentOnceApproved">
                <el-input disabled v-model="personalInfo.studentOnceApproved"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18" v-if="personalInfo.studentOnceApproved === '是'">
              <!-- 对外交流项目类别 -->
              <el-form-item
                :label="$t('projectApplication.studentOnceApprovedNames') + '：'"
                prop="studentOnceApprovedNames">
                <el-input disabled v-model="personalInfo.studentOnceApprovedNames"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 个人信息结束 -->
          <!-- 申请项目情况开始 -->
          <div class="privacy-title title other-title">{{ $t('projectApplication.applyProjectStatus') }}</div>
          <el-row :gutter="24">
            <el-col :span="6">
              <!-- 项目子类别 -->
              <el-form-item
                :label="$t('projectManage.projectSubCategory') + '：'"
                prop="projectSubCategory"
                :rules="[{ required: true, message: $t('projectManage.requireProjectSubCategory'), trigger: 'change'}]">
                <el-select v-model="applyInfo.projectSubCategory" @change="changeProSubCategory" :placeholder="$t('common.pla.pleaseSelect')" clearable style="width: 100%;">
                  <el-option
                    v-for="item in options.projectSubCategory"
                    :key="item.id"
                    :label="item.typeName"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <!-- 项目名称 -->
              <el-form-item
                :label="$t('projectManage.projectName') + '：'"
                prop="projectMngmtId"
                :rules="[{ required: true, message: $t('projectManage.requireProjectName'), trigger: 'change'}]">
                <el-select v-model="applyInfo.projectMngmtId" filterable @change="changeProjectMngmtId" :placeholder="$t('common.pla.pleaseSelect')" clearable style="width: 100%;">
                  <el-option
                    v-for="item in options.projectMngmtId"
                    :key="item.projectId"
                    :label="item.projectName"
                    :value="item.projectId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <!-- 拟留学国别/地区 -->
              <el-form-item
                :label="$t('projectApplication.projectNationCode') + '：'"
                prop="projectNationCode"
                :rules="[{ required: true, message: $t('projectApplication.requireProjectNationCode'), trigger: 'change'}]">
                <el-select v-model="applyInfo.projectNationCode" filterable @change="changeNation" :placeholder="$t('common.pla.pleaseSelect')" clearable style="width: 100%;">
                  <el-option
                    v-for="item in options.projectNationCode"
                    :key="item.key"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <!-- 拟留学学校 -->
              <el-form-item
                :label="$t('projectApplication.projectCollegeId') + '：'"
                prop="projectCollegeId"
                :rules="[{ required: true, message: $t('projectApplication.requireProjectCollegeId'), trigger: 'change'}]">
                <el-select v-model="applyInfo.projectCollegeId" filterable @change="changeProjectCollegeId" :placeholder="$t('common.pla.pleaseSelect')" clearable style="width: 100%;">
                  <el-option
                    v-for="item in options.projectCollegeId"
                    :key="item.id"
                    :label="item.collegeName"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <!-- 拟留学学校英文名称 -->
              <el-form-item
                :label="$t('projectApplication.projectCollegeEn') + '：'"
                prop="projectMngmtIdEn"
                :rules="[{ required: true, message: $t('projectApplication.requireProjectCollegeEn'), trigger: 'blur'}]">
                <el-input disabled v-model="applyInfo.projectMngmtIdEn"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <!-- 拟留学专业名称（一级学科名称） -->
              <el-form-item
                :label="$t('projectApplication.projectOverseasSpecialitie') + '：'"
                prop="projectOverseasSpecialitie"
                :rules="[{ required: true, message: $t('projectApplication.requireProjectOverseasSpecialitie'), trigger: 'change'}]">
                <el-select v-model="applyInfo.projectOverseasSpecialitie" filterable :placeholder="$t('common.pla.pleaseSelect')" clearable style="width: 100%;">
                  <el-option
                    v-for="item in options.projectOverseasSpecialitie"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <!-- 具体留学研究方向 -->
              <el-form-item
                :label="$t('projectApplication.projectResearchDirection') + '：'"
                prop="projectResearchDirection"
                :rules="[{ required: true, message: $t('projectApplication.requireProjectResearchDirection'), trigger: 'blur'},{ validator: checkSpecial, trigger: 'blur'}]">
                <el-input :placeholder="$t('common.pla.pleaseInput')" v-model="applyInfo.projectResearchDirection" :maxlength="32" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="6">
              <!-- 计划留学开始时间 -->
              <el-form-item
                :label="$t('projectApplication.studyAbroadStartTime') + '：'"
                prop="projectStartTime"
                :rules="[{ required: true, message: $t('projectApplication.requireStudyAbroadStartTime'), trigger: 'change'}]">
                <el-date-picker
                  style="width: 100%"
                  v-model="applyInfo.projectStartTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  :placeholder="$t('graduateBase.chooseDateAndTime')"
                  :picker-options="jhlxkssjPickerOptions">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <!-- 计划留学结束时间 -->
              <el-form-item
                :label="$t('projectApplication.studyAbroadEndTime') + '：'"
                prop="projectEndTime"
                :rules="[{ required: true, message: $t('projectApplication.requireStudyAbroadEndTime'), trigger: 'change'}]">
                <el-date-picker
                  style="width: 100%"
                  v-model="applyInfo.projectEndTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  :placeholder="$t('graduateBase.chooseDateAndTime')"
                  :picker-options="jhlxjssjPickerOptions">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <!-- 申请留学期限 -->
              <el-form-item
                :label="$t('projectApplication.projectStudyPeriod') + '：'"
                prop="projectStudyPeriod"
                :rules="[{ required: true, message: $t('projectApplication.requireProjectStudyPeriod'), trigger: 'blur' },{ validator: checkSpecial, trigger: 'blur' },{ validator: checkPositiveInteger, trigger: 'blur'} ]">
                <el-input :placeholder="$t('common.pla.pleaseInput')" v-model="applyInfo.projectStudyPeriod" :maxlength="9" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <!-- 申请资助期限 -->
              <el-form-item
                :label="$t('projectApplication.projectFundingPeriod') + '：'"
                prop="projectFundingPeriod"
                :rules="[{ required: true, message: $t('projectApplication.requireProjectFundingPeriod'), trigger: 'blur'},{ validator: checkSpecial, trigger: 'blur' },{ validator: checkPositiveInteger, trigger: 'blur'}]">
                <el-input :placeholder="$t('common.pla.pleaseInput')" v-model="applyInfo.projectFundingPeriod" :maxlength="9" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <!-- 留学内容 -->
              <el-form-item
                :label="$t('projectApplication.projectStudyAbroadContent') + '：'"
                prop="projectStudyAbroadContent"
                :rules="[{ required: true, message: $t('projectApplication.requireProjectStudyAbroadContent'), trigger: 'blur'}]">
                <el-input disabled v-model="applyInfo.projectStudyAbroadContent"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="applyInfo.projectSubCategory === 6">
              <!-- 是否申请学费资助（仅国家公派于填写） -->
              <el-form-item
                :label="$t('projectApplication.projectFundingTuition') + '：'"
                prop="projectFundingTuition">
                  <div style="display: inline-block;width: 100%;">
                    <el-radio v-model="applyInfo.projectFundingTuition" label="1">{{ $t('externamExchangeBase.yes') }}</el-radio>
                    <el-radio v-model="applyInfo.projectFundingTuition" label="0">{{ $t('externamExchangeBase.no') }}</el-radio>
                  </div>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-else>
              <!-- 拟留学院校QS排名其他排名备注 -->
              <el-form-item
                :label="$t('projectApplication.projectQsRanking') + '：'"
                prop="projectQsRanking"
                :rules="[{ required: true, message: $t('projectApplication.requireProjectQsRanking'), trigger: 'blur'},{ validator: checkSpecial, trigger: 'blur'}]">
                  <el-input :placeholder="$t('common.pla.pleaseInput')" v-model="applyInfo.projectQsRanking" :maxlength="32" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" v-if="applyInfo.projectSubCategory === 6">
            <el-col :span="6" v-if="applyInfo.projectFundingTuition === '1'">
              <!-- 学费金额（请填写币种及金额） -->
              <el-form-item
                :label="$t('projectApplication.projectTuitionAmount') + '：'"
                prop="projectTuitionAmount"
                :rules="validateProjectTuitionAmount">
                <el-input :placeholder="$t('common.pla.pleaseInput')" v-model="applyInfo.projectTuitionAmount" :maxlength="32" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <!-- 拟留学院校QS排名其他排名备注 -->
              <el-form-item
                :label="$t('projectApplication.projectQsRanking') + '：'"
                prop="projectQsRanking"
                :rules="[{ required: true, message: $t('projectApplication.requireProjectQsRanking'), trigger: 'blur'},{ validator: checkSpecial, trigger: 'blur'}]">
                  <el-input :placeholder="$t('common.pla.pleaseInput')" v-model="applyInfo.projectQsRanking" :maxlength="32" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 申请项目情况结束 -->
          <!-- 学生外语水平开始 -->
          <div class="privacy-title title other-title">{{ $t('projectApplication.studentForeignLevel') }}<span style="color: #d9001b;font-size: 15px;">{{ $t('projectApplication.studentForeignLevelDemo') }}</span></div>
          <el-row :gutter="24">
            <el-col :span="8">
              <!-- 学费金额（请填写币种及金额） -->
              <el-form-item
                :label="$t('projectApplication.foreignLanguageGrade') + '：'"
                prop="languageOtherLevel"
                :rules="[{ required: true, message: $t('projectApplication.requireForeignLanguageGrade'), trigger: 'blur'},{ validator: checkSpecial, trigger: 'blur'}]">
                <el-input :placeholder="$t('projectApplication.inputStudentForeignLevelDemo')" v-model="applyInfo.languageOtherLevel" :maxlength="32" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 学生外语水平结束 -->
          <!-- 外方导师开始 -->
          <div class="privacy-title title other-title">{{ $t('projectApplication.foreignTutor') }}</div>
          <el-row :gutter="24">
            <el-col :span="6">
              <!-- 外方导师姓名 -->
              <el-form-item
                :label="$t('projectApplication.teacherName') + '：'"
                prop="teacherName"
                :rules="[{ required: true, message: $t('projectApplication.requireTeacherName'), trigger: 'blur'},{ validator: checkSpecial, trigger: 'blur'}]">
                <el-input :placeholder="$t('common.pla.pleaseInput')" v-model="applyInfo.teacherName" :maxlength="32" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <!-- 专业技术职称 -->
              <el-form-item
                :label="$t('projectApplication.teacherPositional') + '：'"
                prop="teacherPositional"
                :rules="[{ required: true, message: $t('projectApplication.requireTeacherPositional'), trigger: 'blur'},{ validator: checkSpecial, trigger: 'blur'}]">
                <el-input :placeholder="$t('common.pla.pleaseInput')" v-model="applyInfo.teacherPositional" :maxlength="32" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <!-- 职务 -->
              <el-form-item
                :label="$t('projectApplication.teacherJob') + '：'"
                prop="teacherJob"
                :rules="[{ required: true, message: $t('projectApplication.requireTeacherJob'), trigger: 'blur'},{ validator: checkSpecial, trigger: 'blur'}]">
                <el-input :placeholder="$t('common.pla.pleaseInput')" v-model="applyInfo.teacherJob" :maxlength="32" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <!-- 外方导师电子邮箱 -->
              <el-form-item
                :label="$t('projectApplication.teacherEmail') + '：'"
                prop="teacherEmail"
                :rules="[{ required: true, message: $t('projectApplication.requireTeacherEmail'), trigger: 'blur'},{ validator: checkEmail, trigger: 'blur'}]">
                <el-input :placeholder="$t('common.pla.pleaseInput')" v-model="applyInfo.teacherEmail" :maxlength="320" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 外方导师结束 -->
          <!-- 合作项目开始 -->
          <div class="privacy-title title other-title">{{ $t('projectApplication.researchProject') }}</div>
          <el-row :gutter="24">
            <el-col :span="8">
              <!-- 双方导师是否有合作科研项目 -->
              <el-form-item
                :label="$t('projectApplication.cooperateBoth') + '：'"
                prop="cooperateBoth">
                  <el-radio v-model="applyInfo.cooperateBoth" @change="changeCooperateBoth" label="1">{{ $t('externamExchangeBase.yes') }}</el-radio>
                  <el-radio v-model="applyInfo.cooperateBoth" @change="changeCooperateBoth" label="0">{{ $t('externamExchangeBase.no') }}</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" v-if="applyInfo.cooperateBoth === '1' || applyInfo.cooperateBoth === ''">
            <el-col :span="12">
              <!-- 合作项目名称 -->
              <el-form-item
                :label="$t('projectApplication.cooperateName') + '：'"
                prop="cooperateName"
                :rules="validateCooperateNameArr">
                  <el-input :placeholder="$t('common.pla.pleaseInput')" v-model="applyInfo.cooperateName" :maxlength="32" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <!-- 合作开始时间 -->
              <el-form-item
                :label="$t('projectApplication.cooperateStartTime') + '：'"
                prop="cooperateStartTime"
                :rules="validateStartTimeArr">
                  <el-date-picker
                    style="width: 100%"
                    v-model="applyInfo.cooperateStartTime"
                    type="date"
                    value-format="yyyy-MM-dd"
                    :placeholder="$t('graduateBase.chooseDateAndTime')"
                    :picker-options="hzkssjPickerOptions">
                  </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <!-- 合作结束时间 -->
              <el-form-item
                :label="$t('projectApplication.cooperateEndTime') + '：'"
                prop="cooperateEndTime"
                :rules="validateEndTimeArr">
                  <el-date-picker
                    style="width: 100%"
                    v-model="applyInfo.cooperateEndTime"
                    type="date"
                    value-format="yyyy-MM-dd"
                    :placeholder="$t('graduateBase.chooseDateAndTime')"
                    :picker-options="hzjssjPickerOptions">
                  </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 合作项目结束 -->
          <!-- 其他参与的交流项目开始 -->
          <div class="privacy-title title other-title">{{ $t('projectApplication.otherResearchProject') }}</div>
          <el-row :gutter="24">
            <el-col :span="24">
              <!-- 在同济期间，参与其他国家或港澳台地区交流项目的情况介绍：（最大字数不超过 500 字） -->
              <el-form-item
                :label="$t('projectApplication.participantCommunication') + '：'"
                prop="participantCommunication">
                  <el-input :placeholder="$t('common.pla.pleaseInput')" type="textarea" :rows="7" v-model="applyInfo.participantCommunication" :maxlength="500" show-word-limit clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 其他参与的交流项目结束 -->
          <!-- 附件管理开始 -->
          <div class="privacy-title title other-title">
            <span>{{ $t('externamExchangeBase.fileManage') }}</span>
            <!-- 学习(研修)计划模板 -->
            <el-button style="margin-left: 30px;" type="text" size="medium" @click="downloadStudyAndTrainPlan()">{{ $t('projectApplication.studyAndTrainPlan') }}</el-button>
            <!-- 申请人科研成果清单模板 -->
            <el-button type="text" size="medium" @click="downloadApplicateResearchResults()">{{ $t('projectApplication.applicateResearchResults') }}</el-button>
          </div>
          <!-- <el-divider></el-divider> -->
          <!-- <div style="margin-left: 20px;color: #8896a7;font-size: 12px;">{{ $t('externamExchangeBase.fileName') }}</div> -->
          <el-divider></el-divider>
          <el-row :gutter="24" class="file-container">
            <el-col :span="24">
              <!-- 国外院校正式邀请函或接收函 -->
              <el-form-item
                :label="$t('projectApplication.foreignInstitutionLetter')"
                prop="foreignInstitutionLetter"
                label-width="220px"
                style="margin: 12px 0;"
                :rules="[{ required: true, message: $t('projectApplication.requireForeignInstitutionLetter'), trigger: 'change'}]">
                  <el-upload
                    v-model="applyInfo.foreignInstitutionLetter"
                    class="upload-demo"
                    action="/api/commonservice/obsfile/uploadfile"
                    :data="uploadConfig.data"
                    :on-exceed="handleExceed"
                    :before-upload="(file) => beforeUpload(file, 111, 'foreignInstitutionLetter')"
                    :on-success="(response, file, fileList) => handlerUploadSuccess(response, file, fileList, 111, 'foreignInstitutionLetter')"
                    :before-remove="(file, fileList) => handlerBeforeRemove(file, fileList, 111, 'foreignInstitutionLetter')"
                    :on-remove="(file, fileList) => handlerRemove(file, fileList, 111, 'foreignInstitutionLetter')"
                    :on-error="(err, file, fileList) => handlerUploadError(err, file, fileList, 111, 'foreignInstitutionLetter')"
                    :on-preview="(file) => downloadMaterial(file, 111, 'foreignInstitutionLetter')"
                    accept="application/pdf"
                    :limit="1"
                    :file-list="fileList">
                    <el-button size="small" type="primary">{{ $t('graduateBase.chooseFile') }}</el-button>
                  </el-upload>
                  <span class="file-tip-info">{{ $t('projectApplication.foreignInstitutionLetterTip') }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <el-row :gutter="24" class="file-container">
            <el-col :span="24">
              <!-- 学习(研修)计划 -->
              <el-form-item
                :label="$t('projectApplication.studyPlan')"
                prop="studyPlan"
                label-width="220px"
                style="margin: 12px 0;"
                :rules="[{ required: true, message: $t('projectApplication.requireStudyPlan'), trigger: 'change'}]">
                  <el-upload
                    v-model="applyInfo.studyPlan"
                    class="upload-demo"
                    action="/api/commonservice/obsfile/uploadfile"
                    :data="uploadConfig.data"
                    :on-exceed="handleExceed"
                    :before-upload="(file) => beforeUpload(file, 112, 'studyPlan')"
                    :on-success="(response, file, fileList) => handlerUploadSuccess(response, file, fileList, 112, 'studyPlan')"
                    :before-remove="(file, fileList) => handlerBeforeRemove(file, fileList, 112, 'studyPlan')"
                    :on-remove="(file, fileList) => handlerRemove(file, fileList, 112, 'studyPlan')"
                    :on-error="(err, file, fileList) => handlerUploadError(err, file, fileList, 112, 'studyPlan')"
                    :on-preview="(file) => downloadMaterial(file, 112, 'studyPlan')"
                    accept="application/pdf"
                    :limit="1"
                    :file-list="fileList">
                    <el-button size="small" type="primary">{{ $t('graduateBase.chooseFile') }}</el-button>
                  </el-upload>
                  <span class="file-tip-info">{{ $t('projectApplication.studyPlanTip') }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <el-row :gutter="24" class="file-container">
            <el-col :span="24">
              <!-- 国外导师签字的简历 -->
              <el-form-item
                :label="$t('projectApplication.resumeSignedForForeignTutor')"
                prop="resumeSignedForForeignTutor"
                label-width="220px"
                style="margin: 12px 0;"
                :rules="[{ required: true, message: $t('projectApplication.requireResumeSignedForForeignTutor'), trigger: 'change'}]">
                  <el-upload
                    v-model="applyInfo.resumeSignedForForeignTutor"
                    class="upload-demo"
                    action="/api/commonservice/obsfile/uploadfile"
                    :data="uploadConfig.data"
                    :on-exceed="handleExceed"
                    :before-upload="(file) => beforeUpload(file, 113, 'resumeSignedForForeignTutor')"
                    :on-success="(response, file, fileList) => handlerUploadSuccess(response, file, fileList, 113, 'resumeSignedForForeignTutor')"
                    :before-remove="(file, fileList) => handlerBeforeRemove(file, fileList, 113, 'resumeSignedForForeignTutor')"
                    :on-remove="(file, fileList) => handlerRemove(file, fileList, 113, 'resumeSignedForForeignTutor')"
                    :on-error="(err, file, fileList) => handlerUploadError(err, file, fileList, 113, 'resumeSignedForForeignTutor')"
                    :on-preview="(file) => downloadMaterial(file, 113, 'resumeSignedForForeignTutor')"
                    accept="application/pdf"
                    :limit="1"
                    :file-list="fileList">
                    <el-button size="small" type="primary">{{ $t('graduateBase.chooseFile') }}</el-button>
                  </el-upload>
                  <span class="file-tip-info">{{ $t('projectApplication.resumeSignedForForeignTutorTip') }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <el-row :gutter="24" class="file-container">
            <el-col :span="24">
              <!-- 外语证明 -->
              <el-form-item
                :label="$t('projectApplication.foreignLanguageCertificate')"
                prop="foreignLanguageCertificate"
                label-width="220px"
                style="margin: 12px 0;"
                :rules="[{ required: true, message: $t('projectApplication.requireForeignLanguageCertificate'), trigger: 'change'}]">
                  <el-upload
                    v-model="applyInfo.foreignLanguageCertificate"
                    class="upload-demo"
                    action="/api/commonservice/obsfile/uploadfile"
                    :data="uploadConfig.data"
                    :on-exceed="handleExceed"
                    :before-upload="(file) => beforeUpload(file, '114', 'foreignLanguageCertificate')"
                    :on-success="(response, file, fileList) => handlerUploadSuccess(response, file, fileList, 114, 'foreignLanguageCertificate')"
                    :before-remove="(file, fileList) => handlerBeforeRemove(file, fileList, 114, 'foreignLanguageCertificate')"
                    :on-remove="(file, fileList) => handlerRemove(file, fileList, 114, 'foreignLanguageCertificate')"
                    :on-error="(err, file, fileList) => handlerUploadError(err, file, fileList, 114, 'foreignLanguageCertificate')"
                    :on-preview="(file) => downloadMaterial(file, 114, 'foreignLanguageCertificate')"
                    accept="application/pdf"
                    :limit="1"
                    :file-list="fileList">
                    <el-button size="small" type="primary">{{ $t('graduateBase.chooseFile') }}</el-button>
                  </el-upload>
                  <span class="file-tip-info">{{ $t('projectApplication.foreignLanguageCertificateTip') }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <el-row :gutter="24" class="file-container">
            <el-col :span="24">
              <!-- 申请人科研成果清单 -->
              <el-form-item
                :label="$t('projectApplication.scientificResearchAchievements')"
                prop="scientificResearchAchievements"
                label-width="220px"
                style="margin: 12px 0;"
                :rules="[{ required: true, message: $t('projectApplication.requireScientificResearchAchieve'), trigger: 'change'}]">
                  <el-upload
                    v-model="applyInfo.scientificResearchAchievements"
                    class="upload-demo"
                    action="/api/commonservice/obsfile/uploadfile"
                    :data="uploadConfig.data"
                    :on-exceed="handleExceed"
                    :before-upload="(file) => beforeUpload(file, 115, 'scientificResearchAchievements')"
                    :on-success="(response, file, fileList) => handlerUploadSuccess(response, file, fileList, 115, 'scientificResearchAchievements')"
                    :before-remove="(file, fileList) => handlerBeforeRemove(file, fileList, 115, 'scientificResearchAchievements')"
                    :on-remove="(file, fileList) => handlerRemove(file, fileList, 115, 'scientificResearchAchievements')"
                    :on-error="(err, file, fileList) => handlerUploadError(err, file, fileList, 115, 'scientificResearchAchievements')"
                    :on-preview="(file) => downloadMaterial(file, 115, 'scientificResearchAchievements')"
                    accept="application/pdf"
                    :limit="1"
                    :file-list="fileList">
                    <el-button size="small" type="primary">{{ $t('graduateBase.chooseFile') }}</el-button>
                  </el-upload>
                  <span class="file-tip-info">{{ $t('projectApplication.scientificResearchAchievementsTip') }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <el-row :gutter="24" class="file-container">
            <el-col :span="24">
              <!-- 申请人科研成果证明材料 -->
              <el-form-item
                :label="$t('projectApplication.researchAchieveCertificate')"
                prop="researchAchieveCertificate"
                style="margin: 12px 0;"
                label-width="220px">
                  <el-upload
                    v-model="applyInfo.researchAchieveCertificate"
                    class="upload-demo"
                    action="/api/commonservice/obsfile/uploadfile"
                    :data="uploadConfig.data"
                    :on-exceed="handleExceed"
                    :before-upload="(file) => beforeUpload(file, 116, 'researchAchieveCertificate')"
                    :on-success="(response, file, fileList) => handlerUploadSuccess(response, file, fileList, 116, 'researchAchieveCertificate')"
                    :before-remove="(file, fileList) => handlerBeforeRemove(file, fileList, 116, 'researchAchieveCertificate')"
                    :on-remove="(file, fileList) => handlerRemove(file, fileList, 116, 'researchAchieveCertificate')"
                    :on-error="(err, file, fileList) => handlerUploadError(err, file, fileList, 116, 'researchAchieveCertificate')"
                    :on-preview="(file) => downloadMaterial(file, 116, 'researchAchieveCertificate')"
                    accept="application/pdf"
                    :limit="1"
                    :file-list="fileList">
                    <el-button size="small" type="primary">{{ $t('graduateBase.chooseFile') }}</el-button>
                  </el-upload>
                  <span class="file-tip-info">{{ $t('projectApplication.researchAchieveCertificateTip') }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <el-row :gutter="24" class="file-container">
            <el-col :span="24">
              <!-- 其他附件 -->
              <el-form-item
                :label="$t('projectApplication.otherFile')"
                prop="otherFile"
                style="margin: 12px 0;"
                label-width="220px">
                  <el-upload
                    v-model="applyInfo.otherFile"
                    class="upload-demo"
                    action="/api/commonservice/obsfile/uploadfile"
                    :data="uploadConfig.data"
                    :on-exceed="handleExceed"
                    :before-upload="(file) => beforeUpload(file, 117, 'otherFile')"
                    :on-success="(response, file, fileList) => handlerUploadSuccess(response, file, fileList, 117, 'otherFile')"
                    :before-remove="(file, fileList) => handlerBeforeRemove(file, fileList, 117, 'otherFile')"
                    :on-remove="(file, fileList) => handlerRemove(file, fileList, 117, 'otherFile')"
                    :on-error="(err, file, fileList) => handlerUploadError(err, file, fileList, 117, 'otherFile')"
                    :on-preview="(file) => downloadMaterial(file, 117, 'otherFile')"
                    accept="application/pdf"
                    :limit="1"
                    :file-list="fileList">
                    <el-button size="small" type="primary">{{ $t('graduateBase.chooseFile') }}</el-button>
                  </el-upload>
                  <span class="file-tip-info">{{ $t('projectApplication.otherFileTip') }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <!-- 附件管理结束 -->
          <!-- 出国及经费历史信息开始 -->
          <div class="privacy-title title other-title" style="margin-top: 40px;">
            {{ $t('projectApplication.historyInfo') }}
            <!-- <span v-if="personalInfo.studentTrainingLevel === '硕士'">{{ $t('projectApplication.graduateStu') }}</span>
            <span v-else-if="personalInfo.studentTrainingLevel === '博士'">{{ $t('projectApplication.historyOfPhD') }}</span> -->
          </div>
          <edu-table :order="false" :pagination="false" :tooltipEffect="tooltipEffect" :selection="false" stripe :data="approvalProgressData" size="mini">
            <edu-table-column :label="$t('projectApplication.destinationCountry')" prop="destinationCountry" width="110px"></edu-table-column>
            <!-- <edu-table-column v-if="personalInfo.studentTrainingLevel === '博士'" :label="$t('projectApplication.thesisOpened')" prop="thesisOpened" width="135px"></edu-table-column> -->
            <edu-table-column :label="$t('projectApplication.inviteAgency')" prop="inviteAgency"></edu-table-column>
            <edu-table-column :label="$t('projectApplication.planStartTime')" prop="planStartTime"></edu-table-column>
            <edu-table-column :label="$t('projectApplication.planEndTime')" prop="planEndTime"></edu-table-column>
            <edu-table-column :label="$t('projectApplication.realEndTime')" prop="realEndTime"></edu-table-column>
            <edu-table-column :label="$t('projectApplication.backStatus')" prop="backStatus"></edu-table-column>
            <edu-table-column :label="$t('projectApplication.grantingAgency')" prop="grantingAgency"></edu-table-column>
            <edu-table-column :label="$t('externamExchangeBase.auditStatus')" prop="auditStatus">
              <template slot-scope="scope">
                {{ scope.row.auditStatus | auditStatus}}
              </template>
            </edu-table-column>
          </edu-table>
          <!-- 出国及经费历史信息结束 -->
        </el-form>
        <div style="text-align: right;margin-top: 20px;">
          <el-button @click="cancel()">{{ $t('common.btn.cancel') }}</el-button>
          <el-button :disabled="disabledSave" @click="save()">{{ $t('common.btn.save') }}</el-button>
          <el-button :disabled="disabledSubmit" type="primary" @click="submit()">{{ $t('common.btn.submit') }}</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import UTILS from "common/src/utils/utils";
import { queryDic } from "common/src/api/dictionary";
import { downloadfile } from "common/src/api/upload";
import externalExchangeApi from 'common/src/api/externalExchange/externalExchange';
export default {
  components: {
  },
  data() {
    return {
      fileList: [],
       compareNameList: [],
      uploadConfig: {
        data: { bucketname: 'face', folderpath: 'file' },
      },
      fileFlag: true,
      fileInfo: [
        {
          number: 111,
          fileId: '',
          fileName: ''
        },
        {
          number: 112,
          fileId: '',
          fileName: ''
        },
        {
          number: 113,
          fileId: '',
          fileName: ''
        },
        {
          number: 114,
          fileId: '',
          fileName: ''
        },
        {
          number: 115,
          fileId: '',
          fileName: ''
        },
        {
          number: 116,
          fileId: '',
          fileName: ''
        },
        {
          number: 117,
          fileId: '',
          fileName: ''
        },
      ],
      personalInfo: {
        studentGrade: '',
        studentFacultyName: '',
        studentName: '',
        studentId: '',
        studentProfessionName: '',
        studentFormLearning: '',
        studentLeaveSchool: '',
        studentTeacherName: '',
        studentTrainingLevel: '',
        studentTrainingCategory: '',
        studentExpectedGraduationDate: '',
        studentExistFailed: '',
        studentThesisOpened: '',
        studentEnrolCategory: '',
        studentOnceApproved: '',
        studentOnceApprovedNames: '',
      },
      applyInfo: {
        // 个人信息开始
        studentPhone: '',
        studentEmail: '',
        // 个人信息结束
        // 申请项目情况开始
        projectSubCategory: '',
        projectMngmtId: '',
        projectNationCode: '',
        projectCollegeId: '',
        projectMngmtIdEn: '',
        projectOverseasSpecialitie: '',
        projectResearchDirection: '',
        projectStartTime: '',
        projectEndTime: '',
        projectStudyPeriod: '',
        projectFundingPeriod: '',
        projectStudyAbroadContent: '',
        projectFundingTuition: '0',
        requireProjectTuitionAmount: '',
        projectQsRanking: '',
        // 申请项目情况结束
        // 外语成绩开始
        languageOtherLevel: '',
        // 外语成绩结束
        // 外方导师开始
        teacherName: '',
        teacherPositional: '',
        teacherJob: '',
        teacherEmail: '',
        // 外方导师结束
        // 合作项目开始
        cooperateBoth: '',
        cooperateName: '',
        cooperateStartTime: '',
        cooperateEndTime: '',
        participantCommunication: '',
        // 合作项目结束
        // 其他参与的交流项目开始
        participantCommunication: '',
        // 其他参与的交流项目结束
        // 附件管理开始
        foreignInstitutionLetter: '',
        studyPlan: '',
        resumeSignedForForeignTutor: '',
        foreignLanguageCertificate: '',
        scientificResearchAchievements: '',
        researchAchieveCertificate: '',
        otherFile: ''
        // 附件管理结束
      },
      validateProjectTuitionAmount: [],
      options: {
        // 项目子类别
        projectSubCategory: [],
        // 项目名称
        projectMngmtId: [],
        // 拟留学国别/地区
        projectNationCode: [],
        // 拟留学学校
        projectCollegeId: [],
        // 拟留学专业名称（一级学科名称）
        projectOverseasSpecialitie: []
      },
      dataListProp: {},
      approvalProgressData: [],
      disabledSave: false,
      disabledSubmit: false,
      validateCooperateNameArr: [],
      validateStartTimeArr: [],
      validateEndTimeArr: []
    };
  },
  props: {
  },
  computed: {
    // 计划留学开始时间
    jhlxkssjPickerOptions() {
      let _this = this;
      return {
        disabledDate: (value) => {
          if (_this.applyInfo.projectEndTime) {
            // 计划留学开始时间必须小于计划留学截止时间
            if (value.getTime() > new Date(_this.applyInfo.projectEndTime).getTime()) {
              return true;
            }
          }
          return false;
        }
      };
    },
    // 计划留学结束时间
    jhlxjssjPickerOptions() {
      let _this = this;
      return {
        disabledDate: (value) => {
          if (_this.applyInfo.projectStartTime) {
            // 计划留学结束时间必须大于计划留学开始时间
            if (value.getTime() + (24 * 60 * 60 * 1000) < new Date(_this.applyInfo.projectStartTime).getTime()) {
              return true;
            }
          }
          return false;
        }
      };
    },
    // 合作开始时间
    hzkssjPickerOptions() {
      let _this = this;
      return {
        disabledDate: (value) => {
          if (_this.applyInfo.cooperateEndTime) {
            // 合作开始时间必须小于合作截止时间
            if (value.getTime() > new Date(_this.applyInfo.cooperateEndTime).getTime()) {
              return true;
            }
          }
          return false;
        }
      };
    },
    // 合作结束时间
    hzjssjPickerOptions() {
      let _this = this;
      return {
        disabledDate: (value) => {
          if (_this.applyInfo.cooperateStartTime) {
            // 合作截止时间必须大于合作开始时间
            if (value.getTime() + (24 * 60 * 60 * 1000) < new Date(_this.applyInfo.cooperateStartTime).getTime()) {
              return true;
            }
          }
          return false;
        }
      };
    }
  },
  filters: {
    auditStatus(val) {
      switch(val) {
        case 1:
          return '草稿'
        case 2:
          return '已提交'
        case 3:
          return '待审核'
        case 4:
          return '通过'
        case 5:
          return '驳回'
        default:
          return val
      }
    },
  },
  async created() {
    await this.initOptions()
    // 获取项目子类别
    externalExchangeApi.getXMZLBOptions({
      "selectFlag": 0,
      "parentId": 2
    }).then(res => {
      if (res.code === 200 && res.data.length > 0) {
        this.options.projectSubCategory = res.data
      }
    })
    // 获取拟留学专业名称（一级学科名称）
    externalExchangeApi.getFirseMajors().then(res => {
      if (res.code === 200 && res.data.length > 0) {
        this.options.projectOverseasSpecialitie = res.data
      }
    })
    // 获取学生信息
    externalExchangeApi.getStundentInfo().then(res => {
      if (res.code === 200) {
        this.personalInfo = res.data
        this.personalInfo.studentExistFailed = res.data.studentExistFailed ? '是' : '否'
        this.personalInfo.studentOnceApproved = res.data.studentOnceApproved ? '是' : '否'
        this.personalInfo.studentOnceApprovedNames = res.data.studentOnceApprovedNames ? res.data.studentOnceApprovedNames : ''
        this.personalInfo.studentThesisOpened = res.data.studentThesisOpened === '0' ? '否' : (res.data.studentThesisOpened === '1' ? '是' : '-')
        this.applyInfo.studentPhone = res.data.studentPhone
        this.applyInfo.studentEmail = res.data.studentEmail
      }
    })
    // 获取出国及经费历史信息
    externalExchangeApi.getOutAndFundingHistories().then(response => {
      if (response.code === 200) {
        this.approvalProgressData = response.data
      }
    })
  },
  methods: {
    async initOptions() {
      // 筛选条件字典查询
      let data = {
        lang: this.$store.getters.language || "cn",
        type: "allChild",
        keys: [
          "G_GJQU" // 国别/地区
        ]
      };
      await queryDic(data).then(res => {
        UTILS.fillSelect(
          {
            projectNationCode: "G_GJQU" // 国别/地区
          },
          res.data,
          this.options
        );
      });
    },
    // 校验特殊字符$
    checkSpecial(rule, value, callback) {
      let regEn = /[`$]/im;
      if (regEn.test(value)) {
        callback(new Error(this.$t('graduateBase.specialText')))
      } else {
        callback();
      }
    },
    // 校验手机号码
    checkPhone(rule, value, callback) {
      let regExp = /^1[23456789]\d{9}$/;
      if (!regExp.test(value)) {
        callback(new Error(this.$t('projectApplication.validateStudentPhone')))
      } else {
        callback();
      }
    },
    // 校验电子邮件地址
    checkEmail(rule, value, callback) {
      let regExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
      if (!regExp.test(value)) {
        callback(new Error(this.$t('projectApplication.validateStudentEmail')))
      } else {
        callback();
      }
    },
    // 校验申请期限
    checkPositiveInteger(rule, value, callback) {
      let regExp = /^[1-9]\d*$/;
      if (!regExp.test(value)) {
        callback(new Error(this.$t('externamExchangeBase.validatePositiveInteger')))
      } else {
        callback();
      }
    },
    // 修改项目子类别
    changeProSubCategory(val) {
      this.applyInfo.projectMngmtId = ''
      if (val === 6) {
        externalExchangeApi.getGJGPOptions({
          "projectSubCategory": val
        }).then(res => {
          if (res.code ===200 && res.data)
          this.options.projectMngmtId = res.data
        })
      } else if (val === 7) {
        externalExchangeApi.getDQFXOptions({
          "projectSubCategory": val
        }).then(res => {
          if (res.code === 200 && res.data) {
            this.options.projectMngmtId = res.data
          }
        })
      } else {
        this.options.projectMngmtId = []
      }
    },
    changeNation(val) {
      this.applyInfo.projectCollegeId = ''
      this.options.projectCollegeId = []
      // 获取合作大学
      if (val) {
        externalExchangeApi.getCollegeByNationCode({
          "code": val
        }).then(res => {
          if (res.code === 200) {
            this.options.projectCollegeId = res.data
          }
        })
      } else {
        this.options.projectCollegeId = []
      }
    },
    // 修改合作科研项目是否
    changeCooperateBoth(val) {
      // 1是0否
      if (val === '1') {
        this.validateCooperateNameArr = [{ required: true, message: this.$t('projectApplication.requireCooperateName'), trigger: 'blur' },{ validator: this.checkSpecial, trigger: 'blur' }]
        this.validateStartTimeArr = [{ required: true, message: this.$t('projectApplication.requireCooperateStartTime'), trigger: 'blur' }]
        this.validateEndTimeArr = [{ required: true, message: this.$t('projectApplication.requireCooperateEndTime'), trigger: 'blur' }]
      } else if (val === '0') {
        this.validateCooperateNameArr = [{ validator: this.checkSpecial, trigger: 'blur' }]
        this.validateStartTimeArr = []
        this.validateEndTimeArr = []
      }
    },
    // 修改项目名称
    changeProjectMngmtId(val) {
      let projectStudyAbroadContent = ''
      let projectInfo = this.options.projectMngmtId.filter(value => {
        return value.projectId === val
      })
      if (projectInfo.length > 0) {
        projectInfo.map(value => {
          projectStudyAbroadContent += value.projectStudyAbroadContent ? value.projectStudyAbroadContent : ''
        })
      }
      this.applyInfo.projectStudyAbroadContent = projectStudyAbroadContent
    },
    // 修改拟留学学校
    changeProjectCollegeId(val) {
      if (val) {
        let projectMngmtArray = []
        if (this.options.projectCollegeId.length > 0) {
          projectMngmtArray = this.options.projectCollegeId.filter(value => {
            return value.id === Number(val)
          })
          if (projectMngmtArray[0].collegeNameEn) {
            this.applyInfo.projectMngmtIdEn = projectMngmtArray[0].collegeNameEn
          }
        }
      } else {
        this.applyInfo.projectMngmtIdEn = ''
      }
    },
    reback() {
      this.$emit('change-project-index')
    },
    downLoadEnclosureFile(url) {
      downloadfile(url)
    },
    // 下载学习(研修)计划模板
    downloadStudyAndTrainPlan() {
      externalExchangeApi.templateDownload({
        type: 112,
        fileName: '学习(研修)计划模板.docx'
      })
    },
    // 下载申请人科研成果清单模板
    downloadApplicateResearchResults() {
      externalExchangeApi.templateDownload({
        type: 115,
        fileName: '申请人科研成果清单.docx'
      })
    },
    // 文件类方法开始
    handleExceed(files, fileList) {
      this.$message.error(this.$t('externamExchangeBase.limitOneFile'))
    },
    handlerBeforeRemove(file, fileList, fileNumber, key) {
      // if (this.fileFlag) {
      //   return this.$delConfirm().then(_ => {})
      // }
    },
    handlerRemove(file, fileList, fileNumber, key) {
      this.fileInfo.map((value, index) => {
        if (fileNumber === value.number) {
          value.fileId = ''
          value.fileName = ''
          this.applyInfo[key] = ''
        }
      })
      this.compareNameList.forEach((val, index) => {
                if (key === val.number) {
                    this.compareNameList.splice(index, 1)
                }
            })
    },
    beforeUpload(file, fileNumber, key) {
      const fileSizeFlag = file.size && file.size / 1024 / 1024 < 5
      let fileNameLength = file.name.length <= 64
      let fileName = file.name.substring(0, file.name.lastIndexOf('.'))
      let fileNameRepeat = false
      let fileType = file.name.substring(file.name.lastIndexOf('.') + 1)
      const uploadFlag = fileType === 'pdf'
      // this.fileInfo.map((value, index) => {
      //   if (fileNumber === value.number) {
      //     value.fileId = file.uid
      //     value.fileName = file.name
      //     this.applyInfo[key] = value.fileId
      //   }
      // })
      let compFileName = true
      if (this.compareNameList && this.compareNameList.length > 0) {
                this.compareNameList.forEach(val => {
                    if (val.fileName === file.name) {
                        compFileName = false
                    }
                })
            }
      if (!uploadFlag) {
        window.vueApp.showMsgBox({
          message: this.$t("minor.approve.uploadFileError"),
          callback: () => {
          }
        })
      }
      if (!compFileName) {
                window.vueApp.showMsgBox({
                    message: this.$t('externamExchangeBase.sameName'),
                    callback: () => {}
                })
            }
      if (!fileSizeFlag) {
        window.vueApp.showMsgBox({
          message: this.$t("externamExchangeBase.uploadSizeError"),
          callback: () => {
          }
        })
      }
      if (!fileNameLength) {
        window.vueApp.showMsgBox({
          message: this.$t("externamExchangeBase.uploadNameLength"),
          callback: () => {
          }
        })
      }
      this.fileInfo.map((value) => {
        if (value.fileName.length > 0) {
          let fileNameStr = value.fileName.substring(0, value.fileName.lastIndexOf('.'))
          let fileTypeStr = value.fileName.substring(value.fileName.lastIndexOf('.') + 1)
          if (fileType === fileTypeStr && fileNameStr === fileName && value.number !== fileNumber) {
            fileNameRepeat = true
          }
        }
      })
      if (fileNameRepeat) {
        window.vueApp.showMsgBox({
          message: this.$t("externamExchangeBase.uploadNameRepeat"),
          callback: () => {
          }
        })
      }
      this.fileFlag = (uploadFlag && fileSizeFlag && fileNameLength && !fileNameRepeat && compFileName)
      if (!(uploadFlag && fileSizeFlag && fileNameLength && !fileNameRepeat && compFileName)) {
        return false
      }else {
                this.compareNameList.push({
                    fileName: file.name,
                    number: key
                })
            }
    },
    handlerUploadSuccess(response, file, fileList, fileNumber, key) {
      let responseCode = response.code
      if (responseCode === 200) {
        this.fileInfo.map((value, index) => {
          if (fileNumber === value.number) {
            value.fileId = Object.values(response.data)[0].objectkey
            value.fileName = Object.values(response.data)[0].fileName
            this.applyInfo[key] = value.fileId
          }
        })
      }
    },
    handlerUploadError(response, file, fileList, fileNumber, key) {
      this.$message({
        message: this.$t('graduateBase.uploadFail'),
        type: 'error',
      })
      this.fileInfo.map((value, index) => {
        if (fileNumber === value.number) {
          value.fileId = ''
          value.fileName = ''
          this.applyInfo[key] = ''
        }
      })
      this.compareNameList.forEach((val, index) => {
                if (key === val.number) {
                    this.compareNameList.splice(index, 1)
                }
            })
    },
    downloadMaterial(file, fileNumber, key) {
      if (file.url) {
        downloadfile(file.url);
      } else if (file.status === 'success' && file.response.data) {
        downloadfile(file.response.data[file.name].objectkey)
      }
    },
    // 文件类方法结束
    cancel() {
      this.$confirm(this.$t('externamExchangeBase.cancelTip'), this.$t('externamExchangeBase.prompt'), {
        confirmButtonText: this.$t('externamExchangeBase.confirm'),
        cancelButtonText: this.$t('externamExchangeBase.cancel'),
        type: 'warning'
      }).then(() => {
        this.$emit('change-project-index')
      })
    },
    save(type) {
      this.$refs['applyInfo'].validate((valid) => {
        if (valid) {
          let fileInfo = JSON.parse(JSON.stringify(this.fileInfo))
          let targetFileInfo = fileInfo.filter(value => {
            return value.fileId
          })
          let projectMngmtName = ''
          if (this.options.projectMngmtId.length > 0) {
            this.options.projectMngmtId.map(value => {
              if (value.projectId === this.applyInfo.projectMngmtId) {
                projectMngmtName = value.projectName
              }
            })
          }
          let params = {
            "studentOnceApprovedNames": this.personalInfo.studentOnceApprovedNames ? this.personalInfo.studentOnceApprovedNames : '',
            "studentPhone": this.applyInfo.studentPhone, // 学生手机号
            "studentEmail": this.applyInfo.studentEmail, // 电子邮件
            "projectSubCategory": this.applyInfo.projectSubCategory, // 项目子类别（国家公派/短访）ID
            "projectMngmtId": Number(this.applyInfo.projectMngmtId), // 项目ID
            "projectMngmtName": projectMngmtName, // 项目名称
            "projectStudyAbroadContent": this.applyInfo.projectStudyAbroadContent, // 留学内容
            "projectNationCode": this.applyInfo.projectNationCode, // 国家Code
            "projectCollegeId": Number(this.applyInfo.projectCollegeId), // 拟留学学校ID
            "projectOverseasSpecialitie": this.applyInfo.projectOverseasSpecialitie, // 拟留学专业ID
            "projectResearchDirection": this.applyInfo.projectResearchDirection, // 具体留学研究方向
            "projectStartTimeStr": this.applyInfo.projectStartTime, // 项目开始时间
            "projectEndTimeStr": this.applyInfo.projectEndTime, // 项目结束时间
            "projectStudyPeriod": Number(this.applyInfo.projectStudyPeriod), // 申请留学期限
            "projectFundingPeriod": Number(this.applyInfo.projectFundingPeriod), // 申请资助期限
            "projectFundingTuition": Number(this.applyInfo.projectFundingTuition), // 是否申请学费资助（0：否，1：是）
            "projectTuitionAmount": (this.applyInfo.projectSubCategory === 6 && (this.applyInfo.projectFundingTuition === '1' || this.applyInfo.projectFundingTuition === 1)) ? this.applyInfo.projectTuitionAmount : '', // 学费金额（币种及金额）
            "projectQsRanking": this.applyInfo.projectQsRanking, // 拟留学院校QS排名
            "languageOtherLevel": this.applyInfo.languageOtherLevel, // 外语成绩
            "teacherName": this.applyInfo.teacherName, // 外方导师姓名
            "teacherPositional": this.applyInfo.teacherPositional, // 专业技术职称
            "teacherJob": this.applyInfo.teacherJob, // 职务
            "teacherEmail": this.applyInfo.teacherEmail, // 外方导师电子邮箱
            "cooperateBoth": Number(this.applyInfo.cooperateBoth), // 双方导师合作项目（0：否，1：是）
            "cooperateName": (!this.applyInfo.cooperateBoth || this.applyInfo.cooperateBoth === '0') ? '' : this.applyInfo.cooperateName, // 合作项目名称
            "cooperateStartTimeStr": (!this.applyInfo.cooperateBoth || this.applyInfo.cooperateBoth === '0') ? '' : this.applyInfo.cooperateStartTime, // 合作开始时间
            "cooperateEndTimeStr": (!this.applyInfo.cooperateBoth || this.applyInfo.cooperateBoth === '0') ? '' : this.applyInfo.cooperateEndTime, // 合作结束时间
            "participantCommunication": this.applyInfo.participantCommunication, // 参与其他交流项目
            "files": targetFileInfo, // 文件
            "histories": this.approvalProgressData // 出国及经费历史信息
          }
          externalExchangeApi.saveProjectApplication(params).then(res => {
            if (res.code === 200) {
              if (type === '1') {
                externalExchangeApi.applyProjectApplication({
                  applyId: res.data.applyId
                }).then(response => {
                  if (response.code === 200) {
                    this.disabledSubmit = true
                    this.$message({
                      type: 'success',
                      message:  this.$t('externamExchangeBase.submitSuccessfully')
                    })
                    this.$emit('change-project-index')
                  }
                })
              } else {
                this.disabledSave = true
                this.$message({
                  type: 'success',
                  message:  this.$t('externamExchangeBase.savedSuccessfully')
                })
                this.$emit('change-project-index')
              }
            }
          })
        } else {
          setTimeout(() => {
            let isError = document.getElementsByClassName("is-error");
            if (isError[0] && isError[0] && isError[0].querySelector('input')) {
              isError[0].querySelector('input').focus();
            }
          }, 1);
        }
      })
    },
    submit() {
      this.save('1')
    }
  },
  watch: {
    "applyInfo.projectFundingTuition": {
      handler(newVal) {
        if (newVal === '1') {
          this.validateProjectTuitionAmount = [{ required: true, message: this.$t('projectApplication.requireProjectTuitionAmount'), trigger: 'blur'},{ validator: this.checkSpecial, trigger: 'blur'}]
        } else {
          this.validateProjectTuitionAmount = [{ validator: this.checkSpecial, trigger: 'blur'}]
        }
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
  .project-application-container {
    .el-breadcrumb__item:last-child ::v-deep {
      .el-breadcrumb__inner {
        color: #606266;
        font-weight: bold;
        cursor: default
      }
    }
    .el-breadcrumb__item ::v-deep {
      .is-link {
        color: #aaa;
        font-weight: unset;
      }
      .is-link:hover {
        color: #409eff;
      }
    }
    .personal-info-container {
      padding-left: 15px;
    }
    .title {
      font-weight: bold;
      font-size: 18px;
    }
    .privacy-title {
      margin-bottom: 20px;
    }
    .other-title {
      margin-top: 20px;
    }
    .file-container ::v-deep {
      margin-left: 10px!important;
      .el-form-item__label {
        text-align: left!important;
      }
      .upload-demo {
        width: 450px;
        text-align: center;
      }
      .file-tip-info {
        flex: 1;
        color: #8896a7;
      }
      .el-form-item__content {
        display: flex;
      }
    }
    .el-divider--horizontal {
      margin: 7px 0!important;
    }
    .sub-container {
      color: #2a394e;
      padding: 0 20px;
      font-size: 16px;
    }
    .sub-container-title {
      margin-bottom: 20px;
      font-size: 16px;
      .collapse-info {
        margin-left: 55px;
        color: #3a7fe8;
        font-size: 14px;
        cursor: pointer;
      }
    }
    .operate-footer {
      text-align: right;
    }
  }
</style>
